

.live-container{
  position: fixed;
  width: 100%;
}
.live-small-bg{
  width: 750rpx;
  height: 405rpx;
  position: fixed;
  top: 0;
  background: url('https://ailearning.zhilingsd.com/h5/static/img/live-small-bg.png') no-repeat;
  background-size: 100% 100%;
}
.live-big-bg{
  width: 750rpx;
  height: 500rpx;
  position: fixed;
  top: 0;
  background: url('https://ailearning.zhilingsd.com/h5/static/img/live-big-bg.png') no-repeat;
  background-size: 100% 100%;
}
.tip{
  width: 100%;
  padding: 0 16rpx 0 40rpx;
  height: 70rpx;
  color: #1a73d5;
  display: flex;
  position: fixed;
  background: rgba(255,255,255,0.70);
  align-items: center;
  .tip-name{
    font-size: 24rpx;
    padding: 0 162rpx 0 11rpx;
  }
  i{
    font-size: 25rpx;
  }
}
.tab{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
  position: fixed;
  top: 210rpx;
  width: 100%;
}
.resetTab{
  top: 266rpx;
}
.tab-item{
  display: flex;
  width: 346rpx;
  height: 70rpx;
  background: #006ECA;
  font-size: 30rpx;
  color: #ffffff;
  border-radius: 35rpx;
}
.item{
  width: 173rpx;
  text-align: center;
  line-height: 70rpx;
}
.active{
  background: #ffffff;
  border-radius: 35px;
  color: #0060eb;
}
.toggle-btn{
  width: 168rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 32rpx;
  font-size: 24rpx;
  color: #0061e3;
  line-height: 60rpx;
  text-align: center;
}
.live-content{
  position: fixed;
  // top: 320rpx;
  width: 100%;
  // height: calc(100% - 500rpx);
  padding: 0 40rpx;
}
.resetContainer{
  // top: 376rpx;
  // height: calc(100% - 556rpx);
}
.live-list{
  padding: 39rpx 40rpx 0rpx 35rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name{
  color: #4f4f4f;
  font-size: 31rpx;
  max-width: 403rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time{
  color: #999999;
  font-size: 24rpx;
  max-width: 403rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-btn{
  width: 140rpx;
  height: 60rpx;
  background: linear-gradient(270deg,#0061e3, #0099f7);
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 60rpx;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,116,234,0.40); 
}
.msg-item {
  height: 150rpx;
  position: relative;
  left:0;
  top:0;
  overflow: hidden;
  border-radius: 20rpx;
  margin: 0 40rpx 30rpx;
  transition: height .5s;
  box-shadow: 0px 2px 9px 0px rgba(0,122,241,0.25); 
}

.msg {
  position: absolute;
  width: 100%;
  height: 150rpx;
  left:0;
  top:0;
  border-radius: 8rpx;
  z-index: 100;
  background-color: #FFF;
}
.endBoderRadius{
  border-radius: 8rpx 0 0 8rpx;
}
.msg-text {
  position: absolute;
  left: 150rpx;
  bottom: 20rpx;
  font-size: 80%;
  color: rgb(127, 127, 127);
}

.msg-menu {
  position: absolute;
  width: 100%;
  height: 150rpx;
  left:0;
  top:0;
  overflow: hidden;
  border-radius: 20rpx 0 0 20rpx;
  z-index: 0;
}

.menu-delete {
  position: absolute;
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  right: 0;
  font-size: 30rpx;
  background-color: #E6571F;
  color:#FFF;
  font-weight: 500;
  text-align: center;
  line-height:150rpx;
}
.deleteBoderRadius{
  border-radius: 0 8rpx 8rpx 0;
}
.normal-btn {
  margin-top: 3vh;
  position: fixed;
  left: 24rpx;
  bottom: 88rpx;
  max-width: 702rpx;
  z-index: 2;
}
.material-tab{
  position: fixed;
  top: 311rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: scroll;
  white-space: nowrap;
}
.material-type{
  display: inline-block;
  padding: 0 26rpx;
  line-height: 60rpx;
  background: rgba(255,255,255,0.20);
  border-radius: 5px;
  color: #ffffff;
  font-size: 24rpx;
  margin-right: 10rpx;
}
.material-active{
  background: #ffffff;
  color: #0060eb;
}
.material-type:nth-of-type(1){
  margin-left: 40rpx;
}
.material-list{
  padding: 39rpx 34rpx 0rpx 35rpx;
  .icon{
    width: 40rpx;
    height: 40rpx;
    background: #ffffff;
    border: 3rpx solid #8dafe1;
    border-radius: 50%;
    position: absolute;
    right: 34rpx;
    top: 55rpx;
  }
  i{
    position: absolute;
    right: 34rpx;
    top: 45rpx;
    color: #0086F0;
    font-size: 40rpx;
  }
}
.list-bg{
  width: 295rpx;
  height: 150rpx;
  position: absolute;
  right: 0;
  z-index: 999;
  background: url('https://ailearning.zhilingsd.com/h5/static/img/live-list-bg.png') no-repeat;
  background-size: 100% 100%;
}
.material-container{
  position: fixed;
  width: 100%;
}
.bottom-btn{
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 2;
  bottom: 0rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(130rpx + constant(safe-area-inset-bottom));
  height: calc(130rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  display: flex;
  padding: 20rpx 40rpx 20rpx;
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.33); 
  justify-content: space-between;
  .new-btn{
    width: 702rpx;
    height: 90rpx;
    background: linear-gradient(270deg,#0061e3, #0099f7);
    border-radius: 49px;
    color: #fff;
    margin: 0;
  }
  .add-btn {
    border: 2rpx solid #0068E6;
    color: #006DE7;
    font-weight: 400;
    height: 90rpx;
    width: 320rpx;
    border-radius: 51px;
    margin: 0;
  }
  .start-btn{
    width: 320rpx;
    height: 90rpx;
    background: linear-gradient(270deg,#0061e3, #0099f7);
    border-radius: 49px;
    color: #fff;
    margin: 0;
  }
}
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 670rpx;
  z-index: 9999;
  .modal-content {
    background: #FFFFFF;
    border-radius: 24rpx;
    overflow: hidden;
    .title{
      font-size: 36rpx;
      color: #ffffff;
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      background: url('https://ailearning-test.zhilingsd.com/h5/static/img/list-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .modal-list{
    max-height: 710rpx;
    padding-top: 25rpx;
    overflow: hidden;
  }
  .footer{
    height: 100rpx;
    display: flex;
    font-size: 34rpx;
    .add{
      color: #0073e9;
      width: 50%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
    }
    .start{
      color: #ffffff;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      width: 50%;
      background: linear-gradient(270deg,#0061e3, #0099f7);
    }
  }
  .modal-close {
    margin-top: 50px;
    justify-content: center;
    display: flex;
    width: 670rpx;
    z-index: 99999;
    .close-image{
      width: 54rpx;
      height: 54rpx;
    }
  }
}
.watch-guide{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 9000;
  .guide-bg {
    width: 700rpx;
    height: 492rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-eight.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -350rpx;
    top: 377rpx;
  }
  .guide-bg-one{
    width: 698rpx;
    height: 364rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-seven.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -349rpx;
    bottom: 0;
  }
  .guide-bg-two{
    width: 708rpx;
    height: 514rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-three.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -354rpx;
  }
  .guide-bg-three{
    width: 610rpx;
    height: 408rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-six.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 40rpx;
  }
  .guide-bg-four{
    width: 660rpx;
    height: 388rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-four.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 20rpx;
    bottom: 0;
  }
  .guide-bg-five{
    width: 660rpx;
    height: 388rpx;
    background: url('https://ailearning.zhilingsd.com/h5/static/img/guide-page-five.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 20rpx;
    bottom: 0;
  }
}